// 入口函数
$(function(){
    // alert('ok')
    // 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2 配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域
$image.cropper(options)

// 点击上传按钮弹出文件选择框
$('#btnChooseImage').on('click',function(){
    $('#file').click()
})
// 用户选择了新图片文件渲染到裁剪区域
$('#file').on('change',function(){
    var fileList = this.files
    if(fileList.length <=0){
        return layui.layer.msg('请选择文件',{icon: 5})
    }
    var file =fileList[0]
    var newImgURL = URL.createObjectURL(file)
    $image
.cropper('destroy') // 销毁旧的裁剪区域
.attr('src', newImgURL) // 重新设置图片路径
.cropper(options) // 重新初始化裁剪区域
})
// 单击确定按钮 裁剪图片上传到服务器
$('#btnUpload').on('click',function(){
    var dataURL = $image
.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
width: 100,
height: 100
})
.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符
$.ajax({
    method:'post',
    url:'/my/update/avatar',
    data:{
        avatar:dataURL
    },
    success (res){
        if(res.status !==0){
            return layui.layer.msg(res.message,{icon:5})
        }
        layui.layer.msg(res.message,{icon:6})
        // 更新页面头部的头像
        window.parent.getUserInfo()
    }
})
})
})